<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue中使用组件的三大步骤：
						一、定义组件（创建组件）
						二、注册组件
						三、使用组件
						
				一、定义组件（创建组件）
								使用Vue.extend(options)，其中的options和new Vue(options)中的options几乎一样，但也有点小区别，
								区别如下：
										1.el不要写，为什么？
												所有的组件，最终都有一个vm进行管理，由vm决定服务哪个容器，所有的组件都跟随vm走。
										2.data必须写成函数，为什么？
												避免组件后期复用时产生数据的干扰
										注意：组件的html结构需要写在template配置中。
				二、注册组件
								借助components配置项:components{组件名:组件}
				三、使用组件
								编写组件标签，例如:<School></School>

		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- 第三步 -->
			<Xuexiao></Xuexiao>
			<hr>
			<!-- 第三步 -->
			<Ren></Ren>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//第一步：创建组件（School组件）
		const School = Vue.extend({
			template:`
				<div>
					<h2>学校名称：{{sname}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showSchool">提示学校信息</button>
					<button @click="sname += '！'">修改学校名</button>	
				</div>
			`,
			data(){
				return {
					sname:'尚硅谷',
					address:'宏福科技园',
				}
			},
			methods: {
				showSchool(){
					alert(`${this.sname},${this.address}`)
				},
			}
		})

		//第一步：创建组件（Person组件）
		const Person = Vue.extend({
			template:`
				<div>
					<h2>人的姓名：{{pname}}</h2>
					<h2>人的年龄：{{age}}</h2>
					<button @click="showPerson">提示人的信息</button>
					<button @click="age++">修改年龄</button>
				</div>
			`,
			data(){
				return {
					pname:'张三',
					age:18
				}
			},
			methods: {
				showPerson(){
					alert(`${this.pname},${this.age}`)
				}
			},
		})

		//创建vm
		new Vue({
			el:'#demo',
			components:{ //第二步：注册组件
				Xuexiao:School,
				Ren:Person
			}
		})
	</script>
</html>